import { Table,Image,Space,Button } from 'antd'
import { ColumnsType } from 'antd/es/table'
import Column from 'antd/es/table/Column'
import React, { useEffect, useState } from 'react'
import { getUsers } from '../api/users'
import { IUserItem, IUserList } from '../api/users/model/usersTypes'
/**
 * 1. 查看api接口
 *    1-1. 定义接口请求参数类型及响应结果类型
 *    1-2. 定义请求接口的函数
 * @returns 
 */
export default function TableAxios() {
    // 定义状态
    let [users, setUsers] = useState<IUserList>([])
    let [current, setCurrent] = useState<number>(1)
    let [pageSize, setPageSize] = useState<number>(3)
    let [total, setTotal] = useState<number>(10)
    const columns:ColumnsType<IUserItem> = [
        {
            title:'序号',
            render(value:any,row:any,index:number){
                return (index + 1) + (current - 1) * pageSize
            }   
        },
        {
            title:'用户名',
            dataIndex:'login'
        },
        {
            title:'头像',
            render(row:IUserItem){
                return (
                    <Image src={row.avatar_url} width={150}/>
                )
            }
        },
        {
            title:'操作',
            render(row:IUserItem){
                return (
                    <Space>
                        <Button>删除</Button>
                        <Button>编辑</Button>
                    </Space>
                )
            }
        }
    ]
    const asyncGetUsers = async () => {
        let res = await getUsers('aa')
        // console.log(res);
        // console.log(res.items);
        setUsers(res.items);
        setTotal(res.items.length);
    }
    useEffect(() => {// componentDidMount
        asyncGetUsers();
    }, [])
    return (
        <div>
            <Table
                rowKey={'id'}
                dataSource={users}
                columns={columns}
                pagination={{
                    current,
                    pageSize,
                    total,
                    showSizeChanger:true,
                    pageSizeOptions:[5,10,15],
                    onChange(page:number, pageSize:number){
                        setCurrent(page);
                        setPageSize(pageSize);
                    }
                }}
            />
        </div>
    )
}
